<template>
    <el-menu
            class="el-menu-demo"
            mode="horizontal"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            @select="handleSelect">
        <el-submenu index="1">
            <template slot="title"><i title="图表" class="fa fa-bar-chart"></i></template>
            <el-menu-item index="1-1">通用Echarts</el-menu-item>
            <el-menu-item index="1-2">柱状图</el-menu-item>
            <el-menu-item index="1-3">折线图</el-menu-item>
            <el-menu-item index="1-4">饼图</el-menu-item>
            <el-menu-item index="1-5">地图</el-menu-item>

        </el-submenu>
        <el-submenu index="2">
            <template slot="title"><i title="文本" class="fa fa-header"></i></template>
            <el-menu-item index="2-1">文本框</el-menu-item>
            <el-menu-item index="2-2">跑马灯</el-menu-item>
            <el-menu-item index="2-3">超链接</el-menu-item>
            <el-menu-item index="2-4">实时时间</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
            <template slot="title"><i title="媒体" class="fa fa-image"></i></template>
            <el-menu-item index="3-1">图片框</el-menu-item>
            <el-menu-item index="3-2">轮播图</el-menu-item>
            <el-menu-item index="3-3">iframe</el-menu-item>
            <el-menu-item index="3-4">video</el-menu-item>
        </el-submenu>
        <el-submenu index="4">
            <template slot="title"><i title="工具" class="fa fa-th-large"></i></template>
            <el-menu-item index="4-1">边框</el-menu-item>
            <el-menu-item index="4-2">装饰</el-menu-item>
        </el-submenu>
        <el-submenu index="5">
            <template slot="title"><i title="表格" class="fa fa-table"></i></template>
            <el-menu-item index="5-1">轮播表</el-menu-item>
            <el-menu-item index="5-2">排名轮播表</el-menu-item>
        </el-submenu>
        <el-menu-item index="6"><i title="导出图片" class="el-icon-camera"></i></el-menu-item>
        <el-menu-item index="7"><i title="预览" class="el-icon-view"></i></el-menu-item>
        <el-menu-item index="99"><i title="保存" class="fa fa-save"></i></el-menu-item>
        <el-menu-item index="100"><i title="返回" class="fa fa-arrow-left"></i></el-menu-item>
    </el-menu>
</template>

<script>
    import * as u from '@/util/util'
    import * as i from '@/util/imgUtil'

    var resources = require("./data/resources.json")
    export default {
        name: "screenMenu",
        computed: {
            //当前选中的值
            chooseComponent() {
                return this.$store.state.chooseComponent
            },
            //获取面板信息
            panelDom() {
                return this.$store.state.panelDom;
            },
        },
        data() {
            return {
                //资源对象
                resources: resources
            };
        },
        methods: {
            handleSelect(key) {
                switch (key) {
                    case '7':   //预览
                        this.$parent.preview()
                        break;
                    case '99':   //保存
                        this.savePanelDom();
                        break;
                    case '100':   //返回
                        this.$router.push("/bus/screen/myList");
                        break;
                    default:
                        let component = this.resources[key];
                        if (component == null) {
                            this.$message.error("组件还在研发中请稍等！");
                        } else {
                            component.uuid = u.uuid();
                            this.panelDom.component.push(u.copyBean(component));
                            this.$store.commit("setChooseComponent", this.panelDom.component[this.panelDom.component.length - 1])
                        }
                        break;
                }
            },


            //保存当前面板信息
            savePanelDom() {
                u.post("/bus-screen/saveScreenJson", {
                    id: this.$route.params.id,
                    json: JSON.stringify(this.panelDom)
                }).then(res => {
                    this.$message.success("保存成功！");
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    ::v-deep .el-submenu__title, .el-menu-item {
        i {
            font-size: 18px;
            color: white;
        }
    }
</style>
